<template>
  <div class="app-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-statistic title="影视总数" :value="statistics.totalMovies">
              <template #prefix>
                <el-icon><VideoPlay /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-statistic title="会员总数" :value="statistics.totalMembers">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-statistic title="今日访问量" :value="statistics.todayVisits">
              <template #prefix>
                <el-icon><View /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-statistic title="总收入" :value="statistics.totalRevenue" :precision="2" prefix="￥">
              <template #prefix>
                <el-icon><Coin /></el-icon>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 排行榜 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>日榜 TOP10</span>
              <el-button link type="primary" @click="refreshRanking('day')">刷新</el-button>
            </div>
          </template>
          <div class="ranking-list">
            <div v-for="(item, index) in dayRanking" :key="item.movieId" class="ranking-item">
              <span class="ranking-number" :class="getRankingClass(index)">{{ index + 1 }}</span>
              <el-image
                :src="item.coverImage"
                style="width: 40px; height: 50px; margin: 0 10px;"
                fit="cover"
              />
              <div class="ranking-info">
                <div class="ranking-title">{{ item.title }}</div>
                <div class="ranking-stats">
                  <el-icon><View /></el-icon>
                  {{ item.hits }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>周榜 TOP10</span>
              <el-button link type="primary" @click="refreshRanking('week')">刷新</el-button>
            </div>
          </template>
          <div class="ranking-list">
            <div v-for="(item, index) in weekRanking" :key="item.movieId" class="ranking-item">
              <span class="ranking-number" :class="getRankingClass(index)">{{ index + 1 }}</span>
              <el-image
                :src="item.coverImage"
                style="width: 40px; height: 50px; margin: 0 10px;"
                fit="cover"
              />
              <div class="ranking-info">
                <div class="ranking-title">{{ item.title }}</div>
                <div class="ranking-stats">
                  <el-icon><View /></el-icon>
                  {{ item.hits }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>月榜 TOP10</span>
              <el-button link type="primary" @click="refreshRanking('month')">刷新</el-button>
            </div>
          </template>
          <div class="ranking-list">
            <div v-for="(item, index) in monthRanking" :key="item.movieId" class="ranking-item">
              <span class="ranking-number" :class="getRankingClass(index)">{{ index + 1 }}</span>
              <el-image
                :src="item.coverImage"
                style="width: 40px; height: 50px; margin: 0 10px;"
                fit="cover"
              />
              <div class="ranking-info">
                <div class="ranking-title">{{ item.title }}</div>
                <div class="ranking-stats">
                  <el-icon><View /></el-icon>
                  {{ item.hits }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分类统计图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>影视分类统计</span>
          </template>
          <div ref="categoryChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>会员增长趋势</span>
          </template>
          <div ref="memberChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 收入统计图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>月度收入统计</span>
          </template>
          <div ref="revenueChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Statistics">
import { getCurrentInstance, ref, reactive, onMounted, nextTick } from 'vue';
import { VideoPlay, User, View, Coin } from '@element-plus/icons-vue';
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();

const statistics = reactive({
  totalMovies: 0,
  totalMembers: 0,
  todayVisits: 0,
  totalRevenue: 0
});

const dayRanking = ref([]);
const weekRanking = ref([]);
const monthRanking = ref([]);

let categoryChartInstance = null;
let memberChartInstance = null;
let revenueChartInstance = null;

// 获取统计数据
function getStatistics() {
  // 模拟数据，实际应从后端获取
  statistics.totalMovies = 1234;
  statistics.totalMembers = 5678;
  statistics.todayVisits = 9012;
  statistics.totalRevenue = 123456.78;
}

// 获取排行榜数据
function getRankingData() {
  // 模拟数据，实际应从后端获取
  const mockData = [
    { movieId: 1, title: '阿凡达：水之道', coverImage: '', hits: 98765 },
    { movieId: 2, title: '流浪地球2', coverImage: '', hits: 87654 },
    { movieId: 3, title: '满江红', coverImage: '', hits: 76543 },
    { movieId: 4, title: '无名', coverImage: '', hits: 65432 },
    { movieId: 5, title: '深海', coverImage: '', hits: 54321 },
    { movieId: 6, title: '保你平安', coverImage: '', hits: 43210 },
    { movieId: 7, title: '铃芽之旅', coverImage: '', hits: 32109 },
    { movieId: 8, title: '龙马精神', coverImage: '', hits: 21098 },
    { movieId: 9, title: '忠犬八公', coverImage: '', hits: 10987 },
    { movieId: 10, title: '人生路不熟', coverImage: '', hits: 9876 }
  ];

  dayRanking.value = [...mockData];
  weekRanking.value = [...mockData].reverse();
  monthRanking.value = [...mockData].sort(() => Math.random() - 0.5);
}

// 获取排名样式
function getRankingClass(index) {
  if (index === 0) return 'gold';
  if (index === 1) return 'silver';
  if (index === 2) return 'bronze';
  return '';
}

// 刷新排行榜
function refreshRanking(type) {
  proxy.$modal.msgSuccess(`${type}榜已刷新`);
  getRankingData();
}

// 初始化分类统计图表
function initCategoryChart() {
  const chartDom = proxy.$refs.categoryChart;
  categoryChartInstance = echarts.init(chartDom);

  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '影视分类',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '电影' },
          { value: 234, name: '电视剧' },
          { value: 154, name: '动漫' },
          { value: 135, name: '综艺' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  categoryChartInstance.setOption(option);
}

// 初始化会员增长图表
function initMemberChart() {
  const chartDom = proxy.$refs.memberChart;
  memberChartInstance = echarts.init(chartDom);

  const option = {
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 1101, 1434, 1790, 2230],
        type: 'line',
        smooth: true
      }
    ],
    tooltip: {
      trigger: 'axis'
    }
  };

  memberChartInstance.setOption(option);
}

// 初始化收入统计图表
function initRevenueChart() {
  const chartDom = proxy.$refs.revenueChart;
  revenueChartInstance = echarts.init(chartDom);

  const option = {
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [12000, 19000, 15000, 25000, 22000, 31000, 28000, 35000, 32000, 29000, 31000, 38000],
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ],
    tooltip: {
      trigger: 'axis'
    }
  };

  revenueChartInstance.setOption(option);
}

// 响应式调整图表大小
function resizeCharts() {
  categoryChartInstance && categoryChartInstance.resize();
  memberChartInstance && memberChartInstance.resize();
  revenueChartInstance && revenueChartInstance.resize();
}

onMounted(() => {
  getStatistics();
  getRankingData();

  nextTick(() => {
    initCategoryChart();
    initMemberChart();
    initRevenueChart();

    window.addEventListener('resize', resizeCharts);
  });
});
</script>

<style scoped>
.dashboard-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 100px;
}

.stat-item {
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-list {
  max-height: 400px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #f0f0f0;
  font-weight: bold;
}

.ranking-number.gold {
  background: #ffd700;
  color: #fff;
}

.ranking-number.silver {
  background: #c0c0c0;
  color: #fff;
}

.ranking-number.bronze {
  background: #cd7f32;
  color: #fff;
}

.ranking-info {
  flex: 1;
}

.ranking-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}

.ranking-stats {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>